<template>
	<view class="task_page">
		<NavigationTitle title="流程审批" style="color: #000;background: #fff;position: fixed;width: 100%;z-index: 5;">
			<template slot="left_con">
				<text></text>
			</template>
		</NavigationTitle>
		<view class="status-bar"></view>
		<view class="user_search">
			 <uni-data-select
			      v-model="value"
				  :clear="false"
			      :localdata="option_search"
			      @change="changeSel"
			    ></uni-data-select>
			<uni-search-bar class="search" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" @clear="clearSear"/>
		</view>
		<scroll-view class="userList" scroll-y="true" refresher-enabled="true"
               @refresherrefresh="doRefresh" 
			   @scrolltolower = "scrolltoupper"
               :refresher-triggered="pullLoading">
			<view v-if="taskList.length==0"  class="noData">暂无数据</view>
			<text id="a"></text>
			<view class="user_item" v-for="item in taskList" :key="item.userId" @click.stop.prevent="()=>callback('edit',item)">
				<view class="item_top">
					<view class="title">业务编号：<text class="value">{{item.businessKey}}</text></view>
					
					<view class="title">工作地点：<text  class="value">{{item.workerPlace}}</text></view>
					<view class="title">任务事由：<text  class="value">{{item.reason}}</text></view>
					<view class="title">任务启动时间：<text  class="value">{{item.startTime}}</text></view>
					<view class="title">任务结束时间：<text  class="value">{{item.endTime}}</text></view>
				</view>
				<!-- <view class="item_bottom">
					<button size="mini" class="item_btn" @click.stop.prevent="()=>callback('edit',item)">编辑</button>
					<button size="mini" class="item_btn" style="color: red;" @click.stop.prevent="()=>callback('delete',item)">删除</button>
				</view> -->
			</view>
			<uni-load-more :status='loadStatus' v-if="taskList&&taskList.length>3" ></uni-load-more>
		</scroll-view>
		<image src="@/static/common/advice_add.png"  class="userAdd" @click="addTask" ></image>
	</view>
</template>

<script>
	import NavigationTitle from '@/components/navigationTitle'
	import {
		showToastMsg,
		showModalMsg,
	} from '@/utils/format.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			NavigationTitle
		},
		computed: {
			...mapGetters(['project','projectId','authorList'])
		},
		data() {
			return {
				value:'taskName',
				searchValue : {},
				option_search:[
					{ value: 'taskName', text: "任务名称" },
				],
				taskList:[],
				page:{
					current:1,
					size:10,
				},
				pullLoading:false,
				loadingType:0,//加载状态
				isLoadingMore: false, // 是否正在加载更多
				loadStatus: 'more', // 是否还有更多数据
			}
		},
		// onLoad(){
		// 	this.getTaskList(this.page)
		// },
		onShow(){
			this.taskList = []
			this.getTaskList({
					current:1,
					size:10,
			})
		},
		methods: {
			...mapActions(['save_task']),
			goDetail(data){
				this.save_task(data)
				uni.navigateTo({ url:'/pages/task/detail?type=edit' })
			},
			scrolltoupper(){
				let page={
					current:this.page.current+1,
					size:10,
				}
				this.page = page
				this.getListMore(page,this.searchValue)
			},
			 doRefresh() {
				 // console.log('shuaxin')
				  this.pullLoading = true;
			      // 执行数据刷新的逻辑
			      if(!this.pullLoading) return
			      let page={
			      	current:1,
			      	size:10,
			      }
			      this.page = page
			      this.getTaskList(page,this.searchValue)
			    },
			addTask(){
				uni.navigateTo({ url:'/pages/task/detail?type=add' })
			},
			
			async getTaskList(page,value){
				let that = this,param={}
				let {current , size} = JSON.parse(JSON.stringify(page))
				param.pageNum = current
				param.pageSize = size
				
				if(value){
					for(let key in value){
						param[key] = value[key]
					}
				}
				await this.$api.getTaskList(param).then(res=>{
					if(res?.code==200){
						this.taskList = res.data.data
						this.page=page
						this.loadingType = 0;
					}
					
				}).catch(err=>{
					console.log(err)
				})
				setTimeout(()=>{
					that.pullLoading = false;
				},500)
				
				
			},
			async getListMore(page,value){
				if(this.loadingType!==0) return
				this.loadStatus="loading"
				uni.showLoading({
					title:"加载中...",
					mask:true
				})
				this.loadingType =1
				let param = JSON.parse(JSON.stringify(page))
				param.belongProjectt=this.projectId
				if(value){
					for(let key in value){
						param[key] = value[key]
					}
				}
				await this.$api.getTaskList(param).then(res=>{
					if(res?.code==200){
						if(res.data.data.length==0){
							this.loadingType = 2;
							this.loadStatus="noMore"
							return 
						}else if(res.data.data.length<10){
							this.loadingType = 2;
							this.loadStatus="noMore"
						}else{
							this.loadingType = 0;
							this.loadStatus="more"
						}
						this.taskList = this.taskList.concat(res.data.data)
						uni.hideLoading()
					}
				})
			},
			changeSel(e){
				this.value = e
			},
			search(e){
				let obj = {}
				obj[this.value] = e.value
				this.searchValue = obj
				this.getTaskList({
					current:1,
					size:10,
				},obj)
			},
			clearSear(){
				this.searchValue = {}
				this.getTaskList(this.page,null)
			},
			callback(type,data){
				if(type=='edit') this.goDetail(data)
				else if(type=='delete') this.delUser(data)
			},
			async delUser(data){
				if(!this.authorList.includes('system_device_del')) return showToastMsg('无操作权限！')
				showModalMsg('', '是否确认从项目中移除本用户',async (val)=>{
					if(val){
						await this.$api.delEquipment(data.deviceId).then(res=>{
							if(res?.code==200){
								this.getTaskList(this.page,null)
							}
							showToastMsg(res.msg)
						}).catch(err=>{
							showToastMsg('请求失败！')
						})
					}
					
				})
				
			},
			getAssignee(str){
				if(str) return str.slice(1, str.length-1);
				else return ''
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	view {
		box-sizing: border-box !important;
	}
	.task_page {
		position: relative;
		height: 100%;
	}
	.user_search{
		display: flex;
		padding: $System__title_height 12rpx 0;
		.search{
			flex: 7;
		}
		/deep/.uni-stat__select{
			flex: 3;
		}
	}
	.userList {
		height: 83vh;
		position: relative;
		/deep/ .uni-scroll-view-content{
			padding: 0 48rpx 50rpx;
			box-sizing: border-box !important;
		}
		.noData{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			color: #999;
		}
		.user_item{
			min-height: 200rpx;
			background-color: #eee;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			padding: 24rpx;
			box-shadow: 0rpx 5rpx 10rpx 0rpx #F0F0F0;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.item_top{
				width: 100%;
				padding-left: 12rpx;
				font-size: 32rpx;
				.title{
					font-weight: 600;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.value{
						width: 73%;
						display: block;
						font-weight: normal;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			.item_bottom{
				display: flex;
				justify-content: space-between;
				.item_btn{
					width: 49%;
					margin-top: 24rpx;
					
				}
			}
			
		}
	}
	.back_icon{
		width: 37rpx;
	}
	.userAdd{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;
	}
	
</style>
